<template>
	<view class="container">
		<u-navbar :isBack="true" title="订单详情" title-color="#101010"></u-navbar>

		<view view class="downBox">
			<!-- <view class="order-map">
				<view class="order-map-control">
					<map style="width: 100vw; height: 100%;"  :longitude="orderDetail.location_longitude" :latitude="orderDetail.location_latitude" scale='14' :markers="marker" :polyline="polygon" enable-building="true">
						<cover-view slot="callout">
							 <block v-for="(item, index) in marker" :key="index">
								<cover-view :marker-id="item.id" v-if="item.id != 0" class="customCallout" style="display: flex; flex-direction: column; align-items: center; height: 160rpx;">
									<cover-view style="background-color: #FFF; border-radius: 20rpx; padding: 10rpx; color: #000; font-size: 22rpx; text-align: center; box-shadow: 1px 1px 1px 1px rgba(0,0,0,.3);">
										距服务目的地{{item.distance}}km
									</cover-view>
									<cover-image style="width: 120rpx; height: 120rpx; margin-top: 0rpx;" :src="markerPointBack" />
									<cover-image style="width: 74rpx; height: 74rpx; margin-top: 0rpx; border-radius: 50%; margin-top: -110rpx;" :src="item.thumbImg" />
								</cover-view>
								<cover-view :marker-id="item.id" v-if="item.id == 0" style="display: flex; flex-direction: column; align-items: center;">
									<cover-view style="width: 40rpx; height: 40rpx; border-radius: 50%; background-color: #fe7403; font-size: 26rpx; color: #FFF; text-align: center; vertical-align: center; padding: 10rpx;">6666666666666666</cover-view>
									<cover-view style="width: 5rpx; height: 40rpx; background-color: #fe7403;"></cover-view>
								</cover-view>
							</block> 
						</cover-view>
					</map>
				</view>
			</view> -->

			<!-- 订单状态 -->
			<view class="order-map-container">
				<view class="order-main">
					<view
						style="display: flex; flex-direction: row; font-size: 36rpx; font-weight: bold; padding: 20rpx 30rpx;">
						<text style="flex: 1;">{{orderData.order_status_text}}</text>
						<text style="color: #0CB1F0;">服务码 #{{orderData.com_code}}#</text>
					</view>
					<view style="margin-top: 0rpx;color: #666666;font-size: 28rpx;padding-left: 30rpx;" class=""
						v-if="orderDetail.order_status == 1">
						师傅正在全力接单中，请耐心等待
					</view>
					<view style="margin-top: 0rpx;" class="order-main-toptips" v-if="orderDetail.order_status == 2">
						<!-- v-if="isMasterApproching && orderDetail.mechanics.length > 0"> -->
						师傅正在赶往您的位置，预计<text>{{ 60 }}分钟</text>内到达
					</view>
					<view style="margin-top: 0rpx;" class="order-main-toptips" v-if="ismasterServicing">
						师傅正在<text>服务中</text>，请注意服务过程相关细节
					</view>
				</view>
				<view style="display: flex; flex-direction: row; padding: 30rpx 30rpx;">
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_1"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_2"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_3"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_4"></image> -->
				</view>
			</view>

			<!-- 服务地址 -->
			<view class="orderListBox" style="background-color: #fff;">
				<view class="order-main-content" style="margin-top: 20rpx; padding: 0 30rpx;">
					<view class="dot-black"></view>
					<view class="order-main-content-item">
						<view class="title">{{orderData.craft_name}} ({{distance}}km)</view>
						<view v-if="orderData.masterData" style="display: flex;">
							<view class="contacts" v-for="(it, ind) in orderData.masterData" :key="ind">
								<view class="contacts-text-item">{{it.master_mobile}}</view>
								<view class="contacts-medal">{{it.master_name}}</view>
								<!-- <view class="contacts-text-item">44444</view> -->
							</view>
						</view>
					</view>
				</view>
				<view class="order-main-content" style="padding: 0 30rpx;">
					<view class="dot-green"></view>
					<view class="order-main-content-item">
						<view class="title">{{orderData.location_str}}</view>
						<view class="contacts">
							<view class="contacts-text-item">{{orderData.nickname}}</view>
							<view class="contacts-text-item">{{orderData.mobile}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderListBox" style="margin-top: 20rpx;">
				<view class="orderLists">
					<view class="order-maintitle"
						v-if="orderDetail.order_status=='0' && (hour != '00' || minutes != '00' || seconds != '00')">
						定金待付，剩余<text>{{ hour }}</text> 时<text>{{ minutes }}</text> 分<text>{{ seconds }}</text> 秒
					</view>
					<view class="order-maintitle"
						v-if="orderDetail.order_status=='0' && hour == '00' && minutes == '00' && seconds == '00'">
						定金待付
					</view>
					<view class="order-maintitle" v-if="orderDetail.order_status=='6'">
						尾款待付，请尽快完成支付
					</view>
					<view class="order-maintitle" v-if="orderDetail.order_status=='7'">
						服务已完成，感谢您的使用
					</view>
					<!-- <view v-if="isCodeVisible" style="border: 2rpx dashed #fe7403; background-color: antiquewhite; border-radius: 10rpx; display: flex; flex-direction: column; padding: 10rpx 20rpx; margin-top: 20rpx;">
            <text style="color: #666; font-size: 24rpx;">订单完成码</text>
            <text style="font-size: 50rpx; font-weight: bold; margin: 20rpx 0; text-align: center; color: #fe7403; letter-spacing: 10rpx;">{{orderDetail.com_code}}</text>
            <text style="color: #666; font-size: 24rpx">请在您验收工作成果后再将 订单完成码 告知师傅</text>
          </view> -->
					<view class="listBox" style="margin-top: 20rpx;">
						<text>需求工种</text>
						<text></text>
						<text>{{orderData.craft_name}}</text>
					</view>
					<view class="beizhuBox">
						<text>需求描述</text>
						<text>{{orderData.description}}</text>
						<view class="beizhuBox-imgs-group">
							<view v-for="(item, index) in actualDescImgs" :key="index">
								<image class="beizhuBox-imgs-group-image" :src="item" @click="previewImg(item)" />
							</view>
						</view>
					</view>
					<view class="listBox" style="margin-top: 20rpx; margin-bottom: 20rpx;">
						<text>需求备注</text>
						<text></text>
						<text>{{orderData.memo}}</text>
					</view>
				</view>
			</view>
			<view class="orderListBox" style="margin-top: 20rpx;">
				<view class="orderLists">
					<view class="listBox" style="margin-top: 20rpx;">
						<text>称呼</text>
						<text></text>
						<text>{{orderData.nickname}}</text>
					</view>
					<view class="listBox">
						<text>联系电话</text>
						<text></text>
						<text>{{orderData.mobile}}</text>
					</view>
					<view class="listBox">
						<text>服务地址</text>
						<text></text>
						<text style="text-align: right;">{{orderData.location_str}}</text>
					</view>
					<view class="listBox">
						<text>服务时间</text>
						<text></text>
						<text>{{orderDetail.starttime_text}}</text>
					</view>
					<view class="listBox">
						<text>定金金额</text>
						<text></text>
						<text>￥{{orderData.deposit}}</text>
					</view>
					<view class="listBox">
						<text>尾款金额</text>
						<text></text>
						<text>￥{{orderData.amount}}</text>
					</view>
					<!-- <view class="listBox">
						<text>优惠券</text>
						<text></text>
						<text style="color: #fe7403;">-￥{{orderDetail.coupon}}</text>
					</view> -->
					<view class="listBox">
						<text>合计</text>
						<text></text>
						<text style="color: #fe7403;">￥{{orderData.total_price}}</text>
					</view>
					<view class="listBox">
						<text>订单编号</text>
						<text></text>
						<text>{{orderData.order_sn}}</text>
						<text class="listBox-btn" @click="tryCopy(orderData.order_sn)">复制</text>
					</view>
					<view class="listBox">
						<text>创建时间</text>
						<text></text>
						<text>{{orderData.createtime_text}}</text>
					</view>
					<view class="listBox" style="margin-bottom: 40rpx;" v-if="orderDetail.paidtime != null">
						<text>付款时间</text>
						<text></text>
						<text>{{orderDetail.paidtime_text}}</text>
					</view>
					<view class="listBox" style="margin-bottom: 40rpx;" v-if="orderDetail.finishtime != null">
						<text>完成时间</text>
						<text></text>
						<text>{{orderDetail.finishtime_text}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="masterListBox" style="margin-top: 20rpx;" v-if="isMasterListShow">
				<view class="masterListBox-Container" v-if="orderDetail.mechanics.length > 0">
					<view class="master-item" v-for="item in orderDetail.mechanics" :key="item.id">
						<image :src="item.thumb_image" />
						<text class="master-item-name">{{item.name}}</text>
						<text class="master-item-medal">{{orderDetail.craft_name}}</text>
						<text class="master-item-mobile">{{item.mobile}}</text>
					</view>
				</view>
			</view> -->
		</view>
		<view style="height: 160rpx;"></view>
		<!-- <u-popup v-model="unpricedShow" mode="center">
			<view style="width: 650rpx;">
				<image :src="unpricedImg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</u-popup> -->
		<!-- 核销成功 -->
		<view class="pop" v-if="unpricedShow">
			<view class="pop_k" style="padding: 113prx 14rpx 0 14rpx;">
				<image :src="unpricedImg" mode="widthFix" style="width: 100%;position: relative;top: 0px;"></image>
				<view style="color: #FC7404;font-weight: bold;font-size: 52rpx;position: relative;
				top: -300px;left: 32rpx;">
					报价信息确认
				</view>
				<view style="color: #666666;position: relative;top: -285px;left: 20rpx;font-size: 32rpx;
				background: #fff;border-radius: 16rpx 16rpx 0 0;width: 560rpx;padding: 48rpx 32rpx;">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>服务商品</view>
						<view style="font-weight: bold;">{{orderDetail.description}}</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
						<view>预约金金额</view>
						<view style="font-weight: bold;color: #FC7404;">￥{{orderDetail.deposit}}</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
						<view>报价金额</view>
						<view style="font-weight: bold;color: #FC7404;">￥{{orderDetail.amount}}</view>
					</view>
					<view style="background: #FB6000;color: #fff;font-weight: bold;margin-top: 48rpx;
					font-size: 32rpx;border-radius: 56rpx;padding: 20rpx;text-align: center;" @click="payOrder(orderDetail)">
						确定付款
					</view>
					<view style="margin-top: 32rpx;text-align: center;color: #666666;" @click="unpricedShow = false">
						暂不付款
					</view>
				</view>
				<image src="../../static/login/out.png" mode="widthFix" style="width: 24px;position: relative;top: -255px;
				left: 276rpx;height: 24px;" @click="unpricedShow = false"></image>
			</view>
		</view>


		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view class="footer">
			<view class="footer-Box">
				<view>合计：</view>
				<view class="footer-Box-Amount">￥{{orderDetail.totalAmount}}</view>
				
				<button class="fotter-Box-btn-primary">线下付款</button>
					
				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status == 13"
					@click="payOfflineOrder(orderDetail)">线下付款</button>
				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status == 13"
					@click="payOrder(orderDetail)">线上付款</button>
				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status != 13"
					@click="payOrder(orderDetail)">立即付款</button>
				<button class="fotter-Box-btn-primary" v-if="isDone && orderDetail.order_status != 13"
					@click="acceptanceCheck(orderDetail)">完成服务</button>
			</view>
		</view>

	</view>
</template>

<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a70b49c39a96a01751f27a38197ae46c"></script> -->
<script>
	
	// import QQMapWX from "@/common/qqmap-wx-jssdk.js";
	// import { orderApi } from '@/common/user.js';
	// import { userApi } from '@/common/user.js';
	import configUrl  from 'utils/config.js';
	import { request } from 'utils/request.js';
	export default {
		data() {
			return {
				orderData: {},
				actualDescImgs: []
				
				// qqMapControl: null,
				// polygon:[],
				// distance:0,
				// unpricedShow: false,
				// unpricedImg: configUrl.appurlImg + '/app/unpriced.png',
				
				// navStyle: { //顶部导航栏动态样式，其他页面传值
				// 	bgColor: 'var(--my-backgroung-color)', //顶部导航栏动态背景色
				// 	navColor: '#ffffff', //顶部导航栏初始化显示时的盒子文字颜色
				// 	name: '订单详情', //顶部导航栏名称
				// 	isPosition: 'fixed', //顶部导航栏第一盒子的显示状态
				// },
				// actualDescImgs: [],
				// orderDetail: [],
				// marker: [],
				// isMapShow: false,
				// isPayButtonShow: false,
				// isMasterListShow: false,
				// isMasterApproching: false,
				// ismasterServicing: false,
				// isDone: false,
				// isCodeVisible: false,

				// specOrderId: 0,

				// masterArriveRemain: 0,

				// // 订单目的地标点
				// orderDestMarker: [],

				// orderStatusProgImg_1: '/static/image-order-details/order_prog_1.jpg',
				// orderStatusProgImg_2: '/static/image-order-details/order_prog_2.jpg',
				// orderStatusProgImg_3: '/static/image-order-details/order_prog_3.jpg',
				// orderStatusProgImg_4: '/static/image-order-details/order_prog_4.jpg',

				// markerPointBack: configUrl.appurlImg + '/app/icon_masterpoint.png',
				// // markerPoint: configUrl.appurlImg + '/app/icon_userpoint_back.png',
				// // 定时获取师傅定位
				// timerMasterPosition: 0,
				// remaining_transaction_time:0,
				// timer:null

			}
		},
		onLoad(option) {
			
			this.specOrderId = option.order_id;
			this.getOrderInfo(option.order_id);
			// console.log(this.marker,'44444444444')

		},
		methods: {

			//获取订单详情
			getOrderInfo(oid) {
				let _this = this;
				request.getWithToken({
					url: '/order/orderDetails',
					data: {order_id : oid}
				}).then(res=>{
					console.log(res);
					_this.orderData = res.data.orderData;
					this.actualDescImgs = res.data.orderData.desc_images;
				});
				// console.log('marksssssss',this.marker)
			},
			// 预览大图
			previewImg() {
				uni.previewImage({
					urls: this.actualDescImgs
				});
			},
			// 复制订单编号
			tryCopy(content) {
				uni.setClipboardData({
					data: content
				});
			},
			
		}
	}
</script>
<style>
	/* @import url('/static/css/style.css'); */
</style>
<style scoped>
	.container {
		height: 100vh;
	}
	.downBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.order-map {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.order-map-container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.order-main {
		display: flex;
		flex-direction: column;

  }

  .order-main-content {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;

  }
  .order-main-content-item {
    flex: 1;
    flex-direction: column;
    margin-left: 25rpx;
  }

  .title {
    font-size: 28rpx;
    font-weight: bold;
  }
  .contacts {
    display: flex;
    flex-direction: row;
    font-size: 24rpx;
    color: #999;
    line-height: 24rpx;
    align-items: baseline;
  }
  .contacts-text-item {
    margin-right: 10rpx;
  }
  .contacts-medal {
    color: #fb7601;
    background-color: #ffefe2;
    padding: 10rpx;
    border-radius: 10rpx;
    margin-right: 40rpx;
  }

  .dot-green {
    width: 15rpx;
    height: 15rpx;
    background-color: #16d692;
    border-radius: 50%;
    color: #16d692;
    align-self: center;
  }
  .dot-black {
    width: 15rpx;
    height: 15rpx;
    background-color: #000;
    border-radius: 50%;
    color: #000;
    align-self: center;
  }

  .order-main-toptips {
    font-size: 26rpx;
    background-color: #FFEDE1;
    color: #EE811D;
    padding: 20rpx 30rpx;
    width: 100vw;
  }

	.order-map-control {
		width: 100%;
		height: 40vh;
		background-color: #FFF;
		padding: 0;
	}

	.orderListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
	}
  .order-maintitle {
      font-weight: bold;
      font-size: 42rpx;
      margin-top: 50rpx;
  }
  .order-maintitle text {
      color: #fb7502;
      margin:0 5rpx 0 5rpx;
  }

	.orderLists {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
        padding: 0 40rpx 0 40rpx;
	}

	.masterListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 120rpx;
	}

	.masterListBox-Container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
        padding: 40rpx 40rpx 40rpx 40rpx;
	}

	.master-item {
		display: flex;
		flex-direction: row;
		padding: 10rpx 0;
		align-items:center;

	}
  .master-item-name {
    font-size: 26rpx;
    margin: 0 20rpx 0 20rpx;
  }

  .master-item-medal {
    font-size: 22rpx;
    padding: 10rpx 10rpx;
    background-color: #ffefe2;
    color: #fe7403;
  }

  .master-item-mobile {
    flex: 1;
    font-size: 24rpx;
    color: #999;
    text-align: right;
  }

	.master-item image {
		width: 96rpx;
		height: 96rpx;
		border: 1rpx solid #999;
		border-radius: 50%;
	}


	.title image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.beizhuBox {
		display: flex;
		font-size: 26rpx;
		align-items: baseline;
        flex-direction: column;
        color: #999;
		box-sizing: border-box;
	}

    .beizhuBox>text:first-of-type {
        padding-bottom: 0rpx;
    }

	.beizhuBox text:last-of-type {
		/* flex: 1; */
		text-align: left;
		color: #000;
        margin-top: 10rpx;
        white-space: normal;
		height: auto;
	}


	.beizhuBox picker {
		flex: 1;
		text-align: right;
		color: #999;
	}

	.beizhuBox-imgs-group {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.beizhuBox-imgs-group-image {
		width: 25vw;
		height: 25vw;
		margin-right: 4vw;
		border-radius: 10rpx;
	}

	.masterListBox {

	}

	.listBox {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		flex-grow: 1;
	}
  .listBox-btn {
    /* border: 0rpx solid #999; */
    border-left: 2rpx solid #8c8c8c;
    font-size: 24rpx;
    color: #fb7502;
    padding: 0 10rpx;
    margin-left: 10rpx;
    background-color: #FFF;
  }

  .listBox>text:nth-of-type(1) {
      font-size: 26rpx;
      color: #999;
  }

	.listBox>text:nth-of-type(2) {
		font-size: 26rpx;
		color: #999;
		flex-grow: 9;
	}

	.listBox>image {
		width: 38rpx;
		height: 38rpx;
		margin-right: 10rpx;
	}

	.footer {
		width: 100%;
		height: 120rpx;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}

	.footer-Box {
		width: 100%;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
    	padding: 20rpx 40rpx 5rpx 40rpx;
		margin-bottom: 20rpx;
		flex-direction: row;
		align-items: baseline;
		font-size: 22rpx;
		color: #999;
	}
  .footer-Box-Amount {
    font-weight: bold;
    color: #fd7403;
    font-size: 34rpx;
    flex: 1;
  }
  .fotter-Box-btn-primary {
    font-size: 28rpx;
    vertical-align: bottom;
    background-color: #fd7501;
    color: #fff;
    padding: 0 40rpx;
	margin-left: 10rpx;
  }
  
	
</style>
<style lang="scss">
	.pop{
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.78);
		z-index: 999;
		.pop_k{
			width: 630rpx;
			position: fixed;
			top: 12%;
			left: 10%;
			// margin-top: -186rpx;
			// margin-left: -300rpx;
			z-index: 9;
		}
		.popTitle{
			width: 100%;
			text-align: center;
			color: #ffffff;
			position: absolute;
			top: 50rpx;
		}
		.popCenter{
			width: 100%;
			text-align: center;
			color: #ffffff;
			margin-top: 150rpx;
			font-size: 40rpx;
		}
		.popBtn{
			width: 80%;
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			margin-left: -40%;
			padding: 30rpx 0;
			border-top: 1px solid #53beae;
			color: #53beae;
		}
	}
</style>
